import React, { useState, useRef } from "react";

const VideoPlayer: React.FC = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  function handleClick() {
    const nextIsPlaying = !isPlaying;
    setIsPlaying(nextIsPlaying);

    if (nextIsPlaying) {
      videoRef.current?.play();
    } else {
      videoRef.current?.pause();
    }
  }

  return (
    <>
      <button onClick={handleClick}>{isPlaying ? "暂停" : "播放"}</button>
      <br />
      <video width="250" ref={videoRef} onPlay={() => setIsPlaying(true)} onPause={() => setIsPlaying(false)}>
        <source type="video/mp4" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" />
      </video>
    </>
  );
};
export default VideoPlayer;
